import React from 'react' 

import { Swiper, SwiperSlide } from 'swiper/react';
 
import 'swiper/css'; 
import './index.module.css'

// const swiperItems = [ 
//   {
//     class:"item dqssjyl",
//     index:0
//   },
//   {
//     class:"item ntpxlph",
//     index:1
//   }, 
//   {
//     class:"item ptshspqs",
//     index:2
//   },
//   {
//     class:"item ydjyfx",
//     index:3
//   },
//   {
//     class:"item ptfwl",
//     index:4
//   },
//   {
//     class:"item ptyhsj",
//     index:5
//   },
//   {
//     class:"item jyyj",
//     index:6
//   },
  
// ]

const swiperItems = [ 
  "item dqssjyl",
  "item ntpxlph", 
  "item ptshspqs",
  "item ydjyfx",
  "item ptfwl",
  "item ptyhsj",
  "item jyyj"  
]

export default function swiper() {
  return (
    <div>
        <h1>Swiper</h1>
        <Swiper 
            spaceBetween={50}
            slidesPerView={3}
            onSlideChange={() => console.log('slide change')}
            onSwiper={(swiper) => console.log(swiper)}
            >
            <SwiperSlide>
            {({isActive}) => (
              <div className='aaaaa'>Current slide is {isActive ? 'active' : 'not active'}</div>
            )} 
            </SwiperSlide>  
          </Swiper> 
    </div>
  )
}
